<template>
  <div class="card-footer-container">
    <div class="card-footer">
      <!-- 渐变遮罩层 -->
      <div class="gradient-overlay" v-if="!isExpanded"></div>

      <!-- 左侧展开折叠按钮 -->
      <div class="expand-button" @click="toggleExpand">
        <span class="expand-text">{{ isExpanded ? "收起信息" : "展开信息" }}</span>
        <div class="expand-icon" :class="{ 'is-expanded': isExpanded }">
          <base-icon name="iconfont ic-zuojiantou" color="var(--bd)" />
        </div>
      </div>

      <!-- 右侧按钮群 -->
      <div class="right-buttons">
        <!-- 收起状态按钮 -->
        <template v-if="!isExpanded">
          <el-button
            v-for="button in collapsedButtons"
            :key="button.key"
            :type="button.type || 'default'"
            :size="button.size || 'default'"
            @click="handleButtonClick(button)"
          >
            {{ button.label }}
          </el-button>
        </template>

        <!-- 展开状态按钮 -->
        <template v-else>
          <el-button
            v-for="button in expandedButtons"
            :key="button.key"
            :type="button.type || 'default'"
            :size="button.size || 'default'"
            @click="handleButtonClick(button)"
          >
            {{ button.label }}
          </el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  defineProps({
    isExpanded: {
      type: Boolean,
      default: false,
    },
    // 收起状态按钮配置
    collapsedButtons: {
      type: Array,
      default: () => [
        { key: "claim", label: "认领", type: "default" },
        { key: "detail", label: "详情", type: "default" },
      ],
    },
    // 展开状态按钮配置
    expandedButtons: {
      type: Array,
      default: () => [
        { key: "claim", label: "认领", type: "primary" },
        { key: "edit", label: "编辑", type: "default" },
        { key: "detail", label: "详情", type: "default" },
      ],
    },
  });

  const emit = defineEmits(["toggle", "button-click"]);

  const toggleExpand = () => {
    emit("toggle");
  };

  const handleButtonClick = button => {
    emit("button-click", button);
  };
</script>

<style lang="scss" scoped>
  .card-footer {
    height: 64px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg);
  }

  .expand-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    border-radius: 4px;
    width: fit-content;
  }

  .expand-text {
    font-size: 14px;
    color: var(--bd);
    font-weight: 500;
  }

  .expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    gap: 4px;
    &.is-expanded {
      transform: rotate(180deg);
    }
  }

  .right-buttons {
    display: flex;
    align-items: center;
  }

  .gradient-overlay {
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg) 100%);
    pointer-events: none;
  }
</style>
